<template>
  <div class="wrapper">
    <div>
      <label><i class="el-icon-document"></i>用户基本信息</label>
      <ul>
        <li class="paddingb10">
          <label>ID：</label>
          <el-input v-model="detail.id"></el-input>
        </li>
        <li class="paddingb10">
          <label>账号：</label>
          <el-input v-model="detail.name"></el-input>
        </li>
        <li class="paddingb10">
          <label>昵称：</label>
          <el-input v-model="detail.nickname"></el-input>
        </li>
        <li class="paddingb10">
          <label>性别：</label>
          <el-radio-group v-model="detail.sex">
            <el-radio label="gent">男</el-radio>
            <el-radio label="lady">女</el-radio>
            <el-radio label="no">保密</el-radio>
          </el-radio-group>
        </li>
        <li class="paddingb10">
          <label>头像：</label>
          <img v-if="detail.head_portrait" :src="detail.head_portrait">
          <img v-else src="../../../assets/img/no_head.jpg">
        </li>
        <li class="paddingb10">
          <label>手机：</label>
          <el-input v-model="detail.phone"></el-input>
        </li>
        <li class="paddingb10">
          <label>实名认证状态：</label>
          <el-radio-group v-model="detail.authen_status" disabled>
            <el-radio :label="1">审核通过</el-radio>
            <el-radio :label="2">审核失败</el-radio>
            <el-radio :label="0">待审核</el-radio>
            <el-radio :label="-1">未提交</el-radio>
          </el-radio-group>
        </li>
      </ul>
    </div>
    <div v-show="detail.authen_status !== -1" v-if="detail.authen_status !== -1">
      <label><i class="el-icon-tickets"></i>用户实名信息</label>
      <ul>
        <li class="paddingb10">
          <label>真实姓名：</label>
          <el-input v-model="detail.other_info.real_name"></el-input>
        </li>
        <li class="paddingb10">
          <label>身份证号：</label>
          <el-input v-model="detail.other_info.authentication.id_number"></el-input>
        </li>
        <li class="paddingb10">
          <label>证件正面：</label>
          <img v-if="detail.other_info.authentication.front_img" :src="detail.other_info.authentication.front_img">
        </li>
        <li class="paddingb10">
          <label>证件反面：</label>
          <img v-if="detail.other_info.authentication.back_img" :src="detail.other_info.authentication.back_img">
        </li>
      </ul>
    </div>
    <div>
      <label></label>
      <el-button v-if="detail.authen_status == 0" @click="audit(1)">审核通过</el-button>
      <el-button v-if="detail.authen_status == 0" @click="audit(2)">审核失败</el-button>
      <el-button @click="goBack">返回</el-button>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import notify from '@/tools/notify'

export default {
  data () {
    return {

    }
  },
  computed: {
    ...mapState({
      detail: state => state.user.detail
    }),
    id () {
      return this.$route.params.id
    }
  },
  created () {
    // 获取指定用户的信息详情
    this.getDetail()
  },
  methods: {
    // 获取指定用户的信息详情
    async getDetail () {
      let payload = {
        id: this.id
      }
      await this.$store.dispatch('user/userInfo', payload)
    },
    // 返回上一页
    goBack () {
      this.$router.go(-1)
    },
    // 审核通过实名认证
    async audit (status) {
      let payload = {
        id: this.id,
        status: status
      }
      await this.$store.dispatch('authentication/auditPass', payload).then(res => {
        this.getDetail()
        notify.success(res.msg)
      })
    }
  }
}
</script>
<style scoped lang="scss">
@import "../../../assets/scss/base.scss";
.wrapper{
  .paddingb10{
    padding-bottom:10px;
  }
  i{
    margin: 0 5px 0 0;
  }
  label{
    display: inline-block;
    vertical-align: top;
    width: 130px;
    height: 40px;
    line-height: 40px;
    text-align: right;
  }
  .el-input{
    width: 526px;
  }
  ul{
    li{
      img{
        max-width: 400px;
        max-height: 300px;
      }
    }
  }
}
</style>

